<template>
  <div class="page-container">
    <div class="official-plan-list">
      <el-form :inline="true">
        <el-form-item>
          <el-button type="primary" @click="addNew()">New Plan</el-button>
        </el-form-item>
        <el-form-item>
          <config-modal><el-button>Config</el-button></config-modal>
        </el-form-item>
      </el-form>
      <el-card shadow="nerver">
        <el-table :data="dataList" v-loading="dataListLoading" style="width: 100%">
          <el-table-column prop="name" header-align="center" align="center" width="250" label="Name"></el-table-column>
          <el-table-column
            prop="businessType"
            header-align="center"
            align="center"
            width="250"
            label="Business Type"
            :formatter="businessTypeFormat"
          ></el-table-column>
          <el-table-column prop="country" header-align="center" align="center" width="250" label="Country"></el-table-column>
          <el-table-column prop="summary" header-align="center" align="center" width="250" label="Summary"></el-table-column>
          <!-- <el-table-column prop="priceSg" header-align="center" align="center" width="250" label="Price(SGD)"></el-table-column> -->
          <!-- <el-table-column prop="priceCn" header-align="center" align="center" width="250" label="Price(CNY)"></el-table-column> -->
          <el-table-column prop="publishTime" header-align="center" align="center" width="250" label="Publish Time"></el-table-column>
          <el-table-column prop="status" header-align="center" align="center" width="150" label="Status" :formatter="statusFormat"></el-table-column>
          <el-table-column fixed="right" header-align="center" align="center" min-width="200" label="Operations">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="updateHandle(scope.row.id)">Edit</el-button>
              <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">Delete</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="current"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalCount"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
import ConfigModal from "./modal/config";
import { mapState } from "vuex";
export default {
  components: {
    ConfigModal,
  },
  meta: {},
  data() {
    return {
      dataList: [],
      current: 1,
      pageSize: 10,
      totalCount: 0,
      dataListLoading: false,
      dataListSelections: [],
    };
  },
  computed: {
    ...mapState("constant", ["businessTypes", "countryList"]),
  },
  activated() {
    this.getDataList();
  },
  methods: {
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.current = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.current = val;
      this.getDataList();
    },
    /* 格式化 */
    businessTypeFormat(row, column, cellValue) {
      const one = this.businessTypes.find(i => i.value === cellValue);
      return one?.title;
    },
    statusFormat(row, column, cellValue) {
      if (cellValue === 0) {
        return (
          <el-tag size="samll" type="danger">
            Disable
          </el-tag>
        );
      } else {
        return <el-tag size="samll">Enable</el-tag>;
      }
    },
    /* 格式化 */
    //添加新套餐
    addNew() {
      this.$router.push("/sys/pkg/plan/add");
    },
    //数据请求
    async getDataList(current) {
      this.dataListLoading = true;
      if (current) {
        this.current = current;
      }
      const params = {
        current: this.current,
        size: this.pageSize,
        "orders[0].asc": false,
        "orders[0].column": "id",
      };
      const { code, data } = await this.$http.get("/planManage/paging", {
        params,
      });
      if (code === 200) {
        this.dataList = data.records;
        this.totalCount = data.total;
      } else {
        this.dataList = [];
        this.totalCount = 0;
      }
      this.dataListLoading = false;
    },
    updateHandle(id) {
      this.$router.push(`/sys/pkg/plan/${id}/edit`);
    },
    deleteHandle(id) {
      this.$confirm(`Delete this Plan. Continue?`, "Warning", {
        confirmButtonText: "OK",
        cancelButtonText: "Cancel",
        type: "warning",
      }).then(async () => {
        const { code, msg } = await this.$http.post(`/planManage/${id}/delete`);
        if (code === 200) {
          this.$message({
            message: "success",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.getDataList();
            },
          });
        } else {
          this.$message.error(msg);
        }
      });
    },
  },
};
</script>
